<!DOCTYPE html>
<html id="test">
<head>
<meta charset="utf-8">
<title>Vocabulary</title>
<!-- jQuery Mobile references -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<link href="css/jquery.mobile.simpledialog.min.css" rel="stylesheet" />

<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>

<link rel="stylesheet" href="css/toast.css" type="text/css">
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/localstorage.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
<script src="js/jquery.mobile.simpledialog2.min.js"></script>
<script src="js/plugins/toast.js"></script>
<script type="text/javascript" src="js/vocabulary.js"></script>


<!-- Bat cac su kien button click tren inteface -->
<script type="text/javascript">
	//xu ly lesson list in panel
	$(document).ready(
			function() {
				var getLesson = false;
				$("#menu-lesson").click(function() {
					if (getLesson == false) {
						connectDBLesson();
						getLesson = true;
					}
				});

				//khi use click button home de back ra man hinh home, phai luu lai trang thai cua cac nut
				//->phai xu ly khi use press nut back,home tren android; home tren iphone....
				$("#btnHome").click(
						function() {
							setLocalStorage('showKanji',
									$('#radio-choice-t-6a').attr("value"));
							setLocalStorage('showHan_Viet', $(
									'#radio-choice-t-6b').attr("value"));
							setLocalStorage('showPhienAm', $(
									'#radio-choice-t-6c').attr("value"));
							setLocalStorage('showMeanVi', $(
									'#radio-choice-t-6d').attr("value"));
							setLocalStorage('showMeanEn', $(
									'#radio-choice-t-6e').attr("value"));
						});

				//Khi moi chay vao man hinh nay. lay ve cac status cua cac button trong localstorage -> de set on/off cho cac button tuong ung
				//var showKanji = $('#radio-choice-t-6a').attr("value");
				if (getLocalStorage('showKanji') == 'on') {
					//$('#label_kanji').attr("class",'ui-btn ui-corner-all ui-btn-inherit ui-first-child ui-btn-active ui-checkbox-on'); //set class -> label
					$('#label_kanji').attr('id', 'label_kanji_show');
					$('#radio-choice-t-6a').attr("value", "on"); //set value cua input
				} else {
					//$('#label_kanji').attr("class",'ui-btn ui-corner-all ui-btn-inherit ui-first-child ui-checkbox-off');
					$('#label_kanji').attr('id', 'label_kanji_none');
					$('#radio-choice-t-6a').attr("value", "off");
				}

				if (getLocalStorage('showHan_Viet') == 'on') {
					$('#label_kango').attr('id', 'label_kango_show');
					$('#radio-choice-t-6b').attr("value", "on"); //set value cua input
				} else {
					$('#label_kango').attr('id', 'label_kango_none');
					$('#radio-choice-t-6b').attr("value", "off");
				}

				if (getLocalStorage('showPhienAm') == 'on') {
					$('#label_phienam').attr('id', 'label_phienam_show');
					$('#radio-choice-t-6c').attr("value", "on"); //set value cua input
				} else {
					$('#label_phienam').attr('id', 'label_phienam_none');
					$('#radio-choice-t-6c').attr("value", "off");
				}

				if (getLocalStorage('showMeanVi') == 'on') {
					$('#label_mean_vi').attr('id', 'label_mean_vi_show');
					$('#radio-choice-t-6d').attr("value", "on"); //set value cua input
				} else {
					$('#label_mean_vi').attr('id', 'label_mean_vi_none');
					$('#radio-choice-t-6d').attr("value", "off");
				}

				if (getLocalStorage('showMeanEn') == 'on') {
					$('#label_mean_en').attr('id', 'label_mean_en_show');
					$('#radio-choice-t-6e').attr("value", "on"); //set value cua input
				} else {
					$('#label_mean_en').attr('id', 'label_mean_en_none');
					$('#radio-choice-t-6e').attr("value", "off");
				}

				//processing when click button
				//kanji event
				$('#radio-choice-t-6a').click(function() {
					if ($(this).attr("value") == 'on') {
						//$('#label_kanji').attr('id','label_kanji_none');
						$('#label_kanji_show').attr('id', 'label_kanji_none');
						$(this).attr("value", 'off');
						$(".kanji").css('display', 'none');
						setLocalStorage('showKanji', 'off');
					} else {
						//$('#label_kanji').attr("class",'ui-btn ui-corner-all ui-btn-inherit ui-first-child ui-checkbox-off');
						//$('#label_kanji').attr('id','label_kanji_show');
						$('#label_kanji_none').attr('id', 'label_kanji_show');
						$(this).attr("value", 'on');
						$(".kanji").css('display', 'block');
						setLocalStorage('showKanji', 'on');
					}
				});

				//Han Viet event
				$('#radio-choice-t-6b').click(function() {
					if ($(this).attr("value") == 'on') {
						$('#label_kango_show').attr('id', 'label_kango_none');
						$(this).attr("value", 'off');
						$(".mean_kanji").css('display', 'none');
						setLocalStorage('showHan_Viet', 'off');
					} else {
						$('#label_kango_none').attr('id', 'label_kango_show');
						$(this).attr("value", 'on');
						$(".mean_kanji").css('display', 'block');
						setLocalStorage('showHan_Viet', 'on');
					}
				});

				//hiragana event
				$('#radio-choice-t-6c').click(
						function() {
							if ($(this).attr("value") == 'on') {
								$('#label_phienam_show').attr('id',
										'label_phienam_none');
								$(this).attr("value", 'off');
								$(".hiragana").css('display', 'none');
								setLocalStorage('showPhienAm', 'off');
							} else {
								$('#label_phienam_none').attr('id',
										'label_phienam_show');
								$(this).attr("value", 'on');
								$(".hiragana").css('display', 'block');
								setLocalStorage('showPhienAm', 'on');
							}
						});

				//mean vi event
				$('#radio-choice-t-6d').click(
						function() {
							if ($(this).attr("value") == 'on') {
								$('#label_mean_vi_show').attr('id',
										'label_mean_vi_none');
								$(this).attr("value", 'off');
								$(".mean_vi").css('display', 'none');
								setLocalStorage('showMeanVi', 'off');
							} else {
								$('#label_mean_vi_none').attr('id',
										'label_mean_vi_show');
								$(this).attr("value", 'on');
								$(".mean_vi").css('display', 'block');
								setLocalStorage('showMeanVi', 'on');
							}
						});

				//mean en event
				$('#radio-choice-t-6e').click(
						function() {
							if ($(this).attr("value") == 'on') {
								$('#label_mean_en_show').attr('id',
										'label_mean_en_none');
								$(this).attr("value", 'off');
								$(".mean_en").css('display', 'none');
								setLocalStorage('showMeanEn', 'off');
							} else {
								$('#label_mean_en_none').attr('id',
										'label_mean_en_show');
								$(this).attr("value", 'on');
								$(".mean_en").css('display', 'block');
								setLocalStorage('showMeanEn', 'on');
							}
				});
				
				
				/* $('#actionEdit').click(function() {
							alert('chuyen sang trang edit va dua id vao');
				}); */
				
			});//end document
</script>

<style type="text/css">
#ui-icon-favourite:after {
	background-image: url("img/star-16-icon.png");
	background-size: 16px 16px;
}

.ui-dialog-contain {
	width: 92.5%;
	max-width: 500px;
	margin: 10% auto 15px auto;
	padding: 0;
	position: relative;
	top: -15px;
}

#label_kanji_show,#label_kango_show,#label_phienam_show,#label_mean_vi_show,#label_mean_en_show
	{
	background-color: #2ad;
	border-color: #2ad;
	color: #fff;
	text-shadow: 0 1px 0 #08b;
}

#label_kanji_none,#label_kango_none,#label_phienam_none,#label_mean_vi_none,#label_mean_en_none
	{
	background-color: #373737;
	border-color: #1f1f1f;
	color: #fff;
	text-shadow: 0 1px 0 #111;
}
</style>

</head>

<body onload="connectDB();">
	<div data-role="page" data-title="Vocabulary">
		<!-- Start header -->
		<div data-role="header" data-position="fixed" data-theme="b">
			<a id="menu-lesson" href="#nav-panel" data-icon="bars"
				data-iconpos="notext"> Menu</a>
			<div data-role="controlgroup" data-type="horizontal"
				class="ui-mini ui-btn-right" data-inline="true">

				<a href="search.html" id="btnSearch" data-iconpos="notext"
					data-direction="reverse" data-ajax="false"
					class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext">Search</a>

				<a href="vocabulary_add.html" data-ajax="false"
					data-direction="reverse"
					class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-notext">Edit</a>
				<a href="favourite.html?action=vocabulary" data-ajax="false"
					data-direction="reverse"
					class="ui-btn ui-btn-inline ui-icon-star ui-btn-icon-notext">Favourite</a>

				<a href="index.html" id="btnHome" data-iconpos="notext"
					data-direction="reverse" data-ajax="false"
					class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-notext">Home</a>
			</div>

			<h1 id="lesson-name" style="float: left; margin-left: 50px;"></h1>
		</div>
		<!-- /header -->

		<!-- Start main content -->
		<div role="main" class="ui-content jqm-content jqm-fullwidth">

			<!-- show content -->
			<div id="audio-content" data-type="vertical">
				<div data-role="collapsibleset" data-theme="a"
					data-content-theme="b">
					<ol data-role="listview" id="vocabulary-lesson">
					</ol>
				</div>
				
				
				
				<!-- popup Edit/delete-->
				<div data-role="popup" id="popupAction" data-theme="b">
					<ul data-role="listview" data-inset="true"
						style="min-width: 210px;">
						<li data-role="list-divider">Choose an action</li>
						<li><a id="actionEdit" href="#" data-ajax="false" data-direction="reverse" >Edit</a></li>
						<li>
						<a id="actionDelete" href="#" data-theme="a" data-rel="back">Delete</a>
						</li>
					</ul>
				</div>
				
				
				<div id="inlinecontent" style="display: none;" 
  data-options='{"mode":"blank","blankContent":true,"blankContentAdopt":true,"headerText":"Select language","headerClose":false}'>
   
  <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
      <legend>Please select your langauge</legend>   
						
      <input type="radio" name="selectedLanguage" id="selectedLanguageEnglsih" value="en" />
      <label for="selectedLanguageEnglsih">English</label>
      <input type="radio" name="selectedLanguage" id="selectedLanguageSpanish" value="es" />
      <label for="selectedLanguageSpanish">Español</label>
    </fieldset>
    <a rel='close' data-role='button' href='#'> Close </a>
  </div>
</div>


				
				<!-- dialog popup remove-->
					<!-- <div data-role="popup" id="popupDelete" data-theme="a"
						data-overlay-theme="b" class="ui-content"
						style="max-width: 340px; padding-bottom: 2em;">
						<h3>Bạn có muốn xóa không?</h3>
						<br>
						<center>
							<a id="removeFavouriteOK" href="#" data-rel="back"
								class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left">Ok</a>
							<a id="removeFavouriteCacel" href="#" data-rel="back"
								class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Cancel</a>
						</center>
					</div> -->


				<!-- dialog popup rememeber-->
				<div data-role="popup" id="write-note" data-theme="a"
					data-overlay-theme="b" class="ui-content"
					style="max-width: 340px; padding-bottom: 2em;">
					<h3>Rememeber</h3>
					<div>
						<textarea cols="40" rows="25" name="textarea" id="note-content"></textarea>
						<br> <br> <a id="writeNoteOK" href="#" data-rel="back"
							class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left">Ok</a>
						<a id="writeNoteCANCEL" href="#" data-rel="back"
							class="ui-nodisc-icon ui-btn ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">Cancel</a>
						</center>
					</div>
				</div>
			</div>
			<!-- End show content -->
		</div>
		<!-- /content -->

		<!-- Start footer -->
		<div data-role="footer" class="nav-glyphish-example" data-theme="b"
			data-position="fixed">
			<div id="viewTypeForm">
				<fieldset data-role="controlgroup" data-theme="c"
					data-type="horizontal" data-mini="true">
					<input type="checkbox" name="radio-choice-t-6"
						id="radio-choice-t-6a" value="on" checked="true" /> <label
						id="label_kanji" for="radio-choice-t-6a">Kanji</label> <input
						type="checkbox" name="radio-choice-t-6" id="radio-choice-t-6b"
						value="on" checked="true" /><label id="label_kango"
						for="radio-choice-t-6b">Hán-Việt</label> <input type="checkbox"
						name="radio-choice-t-6" id="radio-choice-t-6c" value="on"
						checked="true" /><label id="label_phienam"
						for="radio-choice-t-6c">Phiên Âm</label> <input type="checkbox"
						name="radio-choice-t-6" id="radio-choice-t-6d" value="on"
						checked="true" /><label id="label_mean_vi"
						for="radio-choice-t-6d">Nghĩa Việt</label> <input type="checkbox"
						name="radio-choice-t-6" id="radio-choice-t-6e" value="on"
						checked="true" /><label id="label_mean_en"
						for="radio-choice-t-6e">Nghĩa Anh</label>
				</fieldset>
			</div>
		</div>
		<!-- /footer -->


		<!-- Start panel (muc luc)-->
		<div data-role="panel" data-position-fixed="true" data-display="push"
			data-theme="b" id="nav-panel">
			<div data-role="header" data-position-fixed="true" data-theme="b">
				<h5>目次</h5>
			</div>
			<ul data-role="listview" data-inset="true" data-divider-theme="a"
				id="lesson-list">
			</ul>
		</div>
		<!-- /panel -->
	</div>
</body>
</html>